import React from 'react';
import PropTypes from 'prop-types';
import { Table, Modal, Pagination, Button, Tooltip,Icon } from 'antd';
import styles from './../UserManagement/UserList/List.css';
const confirm = Modal.confirm;

const List = ({ onDeleteItem, onEditItem, onCreate, onChange, pagination, dataSource, loading }) => {
    const handleMenuClick = (record,type) => {
        switch (type){
            case 'plus':
                onCreate(record.id);
                break;
            case 'edit':
                onEditItem(record);
                break;
            case 'delete':
                confirm({
                    title: 'Are you sure delete this record?',
                    onOk () {
                        onDeleteItem(record.id)
                    },
                });
                break;
            default:

        }
    };
    const columns = [
        {
            title: 'ID',
            dataIndex: 'id',
            key: 'id'
        }, {
            title: 'Name',
            dataIndex: 'name',
            key: 'name'
        }, {
            title: 'Icon',
            dataIndex: 'icon',
            key: 'icon',
            render: (text) => <Icon type={text} />,
        }, {
            title: 'Path',
            dataIndex: 'path',
            key: 'path'
        }, {
            title: 'Operation',
            key: 'operation',
            width: 100,
            render: (record) => {
                return (
                    <span className={styles.menuBox}>
                        <Tooltip placement="left" title="新增子菜单">
                            <Button type="primary" size="small" icon="plus" onClick={()=>handleMenuClick(record,'plus')}/>
                        </Tooltip>
                        <Tooltip placement="top" title="编辑">
                            <Button type="primary" size="small" icon="edit" onClick={()=>handleMenuClick(record,'edit')}/>
                        </Tooltip>
                        <Tooltip placement="right" title="删除">
                            <Button type="primary" size="small" icon="close" onClick={()=>handleMenuClick(record,'delete')}/>
                        </Tooltip>
                    </span>
                )
            },
        },
    ];

    const tableOptions = {
        columns: columns,
        dataSource,
        loading,
        pagination: false,
        bordered: true,
        size:"small",
        rowKey(record){
            return record.id;
        }
    };

    const pageProps = {
        total: pagination.total,
        current: pagination.current,
        pageSize: 20,
        onChange: onChange
    };

    return (
        <div>
            <Table {...tableOptions} />
            <Pagination className="ant-table-pagination" {...pageProps}/>
        </div>
    )
};

List.propTypes = {
    onDeleteItem: PropTypes.func,
    onEditItem: PropTypes.func,
    location: PropTypes.object,
};

export default List;
